import React from 'react'
import {Link} from 'react-router-dom'
import {Dropdown} from 'primereact/dropdown'
import {Card} from 'primereact/card'

class TokenSelect extends React.Component{
  constructor(){
    super()

    this.state={
      TokenItem:null
    }

    this.onTokenItemChange=this.onTokenItemChange.bind(this)
  }

  onTokenItemChange(e){
    this.setState({TokenItem:e.value})
  }

  render(){
    const tokenItems=[
      {name:'BLACK/EOS', code:'EOS'},
      {name:'BLACK/EOS2', code:'EOS'},
      {name:'BLACK/EOS3', code:'EOS'}
    ]
    return (
      <Dropdown 
        value={this.state.TokenItem} 
        options={tokenItems} 
        onChange={this.onTokenItemChange} 
        style={{width:'120px'}} 
        placeholder="BLACK/EOS" 
        optionLabel="name"
      />
    )
  }

}

class TokenTrend extends React.Component{
  render(){
    return (
      <Card>
        <div className="p-g">
          <div className="p-g-2">
            <p>BLACK</p>
          </div>
          
          <div className="p-g-2">
            <p>最新价</p>
            <p>0.111222EOS</p>
          </div>

          <div className="p-g-2">
            <p>24h涨跌幅</p>
            <p style={{color:'red'}}>+0.99%</p>
          </div>

          <div className="p-g-2">
            <p>24h最高价</p>
            <p>0.111222EOS</p>
          </div>

          <div className="p-g-2">
            <p>24h最低价</p>
            <p>0.111222EOS</p>
          </div>

          <div className="p-g-2">
            <p>24h成交量</p>
            <p>0.111222BLACK</p>
          </div>

          <div className="p-g-12">
            <hr style={{color:'#f2f2f2'}}></hr>
          </div>

          <div className="p-g-8">
            <p>币种介绍</p>
            <p>aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa
              aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa
            </p>
          </div>

          <div className="p-g-2">
            <div>发行总量</div>
            <p>300000000</p>
            <div>合约名称</div>
            <p>eosblacktem</p>
          </div>

          <div className="p-g-2">
            <div>流通总量</div>
            <p>89652463</p>
            <div>官网</div>
            <p><a href="#">http://www.eos.com</a></p>
          </div>
        </div>
      </Card>
    )
  }
}


class TokenDetail extends React.Component{
  render(){
    return (
      <div className="p-g">
        <div className="p-g-2">
          <Link to={`/market`}>返回</Link>
        </div>
        <div className="p-g-7"></div>
        <div className="p-g-3">
          <span style={{ marginRight: '10px' }}>选择币种：</span>
          <TokenSelect />
        </div>

        <div className="p-g-12">
          <TokenTrend />
        </div>
      </div>
    )
  }
}

export default TokenDetail